<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <el-descriptions class="margin-top"  :column="2"  border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          活动名称
        </template>
        {{form.promotionName}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          活动时间
        </template>
        {{form.startTime}} - {{form.endTime}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          活动类型
        </template>
        <el-radio-group v-model="form.couponActivityType" disabled >
          <el-radio-button label="REGISTERED" >新人发券</el-radio-button>
          <el-radio-button label="SPECIFY" >精确发券</el-radio-button>
          <el-radio-button label="INVITE_NEW" >邀新赠券</el-radio-button>
          <el-radio-button label="AUTO_COUPON" >自动赠券</el-radio-button>
        </el-radio-group>
      </el-descriptions-item>


      <el-descriptions-item  v-if="form.couponActivityType == 'AUTO_COUPON'">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          领取频率
        </template>
        <el-radio-group v-model="form.couponFrequencyEnum" size="small" disabled>
          <el-radio-button label="DAY" >每日一次</el-radio-button>
          <el-radio-button label="WEEK" >每周一次</el-radio-button>
          <el-radio-button label="MONTH" >每月一次</el-radio-button>
        </el-radio-group>
      </el-descriptions-item>

      <el-descriptions-item  v-if="form.couponActivityType === 'SPECIFY'">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          活动范围
        </template>
          <el-radio-group v-model="form.activityScope" disabled>
            <el-radio-button label="ALL" >全部会员</el-radio-button>
            <el-radio-button label="DESIGNATED" >指定会员</el-radio-button>
          </el-radio-group>
      </el-descriptions-item>
    </el-descriptions>

    <el-card class="box-card" v-if="form.couponActivityType === 'SPECIFY' &&form.activityScope === 'DESIGNATED'">
      <div slot="header" class="clearfix">
        <span>选择会员</span>
      </div>
      <div class="form-item-view">

        <el-table  :data="selectMemberList" border style="margin-top: 10px">
          <el-table-column label="用户名称" align="center" prop="nickName" />
          <el-table-column label="手机号" align="center" prop="mobile" />
          <el-table-column label="最后登录时间" align="center" prop="lastLoginDate" />
        </el-table>

      </div>
    </el-card>


    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>配置优惠券</span>
      </div>
      <div class="form-item-view">
        <el-table  :data="selectCouponList" border style="margin-top: 10px">
          <el-table-column label="优惠券名称" align="center" prop="couponName" />
          <el-table-column label="品类描述" align="center" prop="scopeType" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mall_coupon_scope_type" :value="scope.row.scopeType"/>
            </template>
          </el-table-column>
          <el-table-column label="面额/折扣" align="center" >
            <template slot-scope="scope">
              <span v-if="scope.row.couponType == 'PRICE'">{{ scope.row.price }} / 元</span>
              <span v-if="scope.row.couponType == 'POINT'">{{ scope.row.couponDiscount }} / 折</span>
            </template>
          </el-table-column>
          <el-table-column label="赠送数量" align="center" prop="num" />
        </el-table>

      </div>
    </el-card>
  </div>
</template>

<script>
import {  getCouponActivity } from "@/api/mall/promotion/coupon-activity";
export default {
  name: "CouponActivityView",
  dicts: ['mall_coupon_get_type','mall_coupon_type','mall_coupon_scope_type'],
  props: {
    activityId: {
      type: Number
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 查询参数
      // 表单参数
      form: {},
      selectCouponList: [], //选择的优惠券列表
      selectMemberList: [], //选择的会员列表
    };
  },
  created() {
    this._getCouponActivity();
  },
  methods: {
    /** 查询商城优惠券列表 */
    _getCouponActivity() {
      getCouponActivity(this.activityId).then(response => {
        this.form = response.data.couponActivity;
        this.selectCouponList = response.data.items;
        this.selectMemberList = response.data.members;
      });
    },
  }
};
</script>
